/*
 * @Author: YYJ
 * @Date: 2023-12-26 11:48:04
 * @Description: 
 * @FilePath: \lgd-admin\src\pages\study\overview\index.tsx
 */
import { CheckCircleTwoTone, PlayCircleTwoTone, PoweroffOutlined } from '@ant-design/icons';
import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components';
import { Button, Card, Carousel, Col, List, Row, Statistic, message } from 'antd';
import RcResizeObserver from 'rc-resize-observer';
import { useEffect, useState } from 'react';
import FocusForm from './focusForm';
import { StudyContentItem, StudyContentReq, focusProgress, OverviewItem } from '@/services/study/content';
import { queryStudying, queryOverview } from '@/services/study/overView';
import DurationLine from './durationLine';

export default () => {
    const [startTime, setStartTime] = useState(0);
    const [startHide, setStartHide] = useState(false);
    const [endShowId, setEndShowId] = useState(0);
    const [focusOpen, setFocusOpen] = useState<boolean>(false)
    const [studyContentReq, setStudyContentReq] = useState<Partial<StudyContentReq> | undefined>()
    const [studingList, setStudingList] = useState<StudyContentItem[]|undefined>()
    const [overviewItem, setOverviewItem] = useState<OverviewItem | undefined>()

    useEffect(() => {
        queryStudying().then(res =>{
            setStudingList(res.data)
        })
        queryOverview().then(res =>{
            setOverviewItem(res.data)
        })
    }, [])

    const handleStart = (item: StudyContentItem) =>{
        setStartHide(true)
        setStartTime(new Date().getTime())
        setEndShowId(item.id as number)
    }

    const handleFocus = async (fields: StudyContentReq) => {
        setFocusOpen(false)
        var duration = (new Date().getTime() - startTime) / 60000
        if(duration < 1){
            message.error("专注学习时间太短了")
            setStudyContentReq(fields)
        }else{
            fields.duration = duration
            message.loading('正在更新学习进度')
            const res = await focusProgress({ ...fields })
            if (res.success) {
              message.success('更新学习进度成功')
            } else {
              message.error(res.msg)
            }
            location.reload()
            setStartHide(false)
            setEndShowId(0)
        }
    }

    const showFoucsModal = (item: StudyContentItem) => {
        setFocusOpen(true)
        setStudyContentReq(item)
    }

    return (
        <PageContainer title={false}>
            <RcResizeObserver.Collection key="resize-observer">  
                <ProCard>
                    <List grid={{ gutter: 10, column: 8 }}
                        dataSource={studingList}
                        renderItem={(item) => (
                            <List.Item>
                                <ProCard hoverable={true} size={'small'}>
                                    <div title={item.author + ' 当前进度：' + item.currentProgress + "%"} style={{ height:60}}>
                                        <Button
                                            icon = {<PlayCircleTwoTone />}
                                            hidden={startHide}
                                            onClick={()=>{ handleStart(item) }   
                                        }/>
                                        <Button 
                                            icon = {<CheckCircleTwoTone />}
                                            hidden={endShowId != item.id}
                                            onClick={()=>{ showFoucsModal(item) }   
                                        }/>
                                        {item.name}
                                    </div>
                                </ProCard>
                            </List.Item>
                        )}
                    />
                </ProCard>
                <ProCard bordered split={'vertical'}>
                    <ProCard split="horizontal">
                        <ProCard split={'vertical'} >
                            <StatisticCard
                                statistic={{
                                    title: '今天学习',
                                    value: overviewItem?.todaySub + "时",
                                    trend: overviewItem?.todayTrend,
                                    tip: "昨天：" + overviewItem?.yesterdayDuration + "时",
                                    description: (
                                        "已学习："+overviewItem?.todayDuration + "时"
                                    ),
                                }}
                            />
                            <StatisticCard
                                statistic={{
                                    title: '本周学习',
                                    value: overviewItem?.weekSub + "时",
                                    trend: overviewItem?.weekTrend,
                                    tip: "上周：" + overviewItem?.lastWeekDuration + "时",
                                    description: (
                                        "已学习："+overviewItem?.weekDuration + "时"
                                    ),
                                }}
                            />
                        </ProCard>
                        <ProCard split="vertical">
                            <StatisticCard
                                statistic={{
                                    title: '本月学习',
                                    value: overviewItem?.monthSub + "时",
                                    trend: overviewItem?.monthTrend,
                                    tip: "上月：" + overviewItem?.lastMonthDuration + "时",
                                    description: (
                                        "已学习："+overviewItem?.monthDuration + "时"
                                    ),
                                }}
                            />
                            <StatisticCard
                                statistic={{
                                    title: '本年学习',
                                    value: overviewItem?.yearSub + "时",
                                    trend: overviewItem?.yearTrend,
                                    tip: "去年：" + overviewItem?.lastYearDuration + "时",
                                    description: (
                                        "已学习："+overviewItem?.yearDuration + "时"
                                    ),
                                }}
                            />
                        </ProCard>
                    </ProCard>
                    <ProCard title="学习内容分布图"></ProCard>
                </ProCard>
                <ProCard title="学习趋势">
                    <DurationLine/>
                </ProCard>
            </RcResizeObserver.Collection>
            <FocusForm
                studyContentReq={studyContentReq}
                open={focusOpen}
                onCancel={() => setFocusOpen(false)}
                onSubmit={handleFocus}
            />
        </PageContainer>
    );
};